<template>
  <div>
    <p>gui.js库(可视化改变三维场景)</p>
    <div class="three_box"></div>
  </div>
</template>

<script setup>
import { nextTick } from "vue";
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { GUI } from "three/addons/libs/lil-gui.module.min.js";
nextTick(() => {
  const scene = new THREE.Scene();
  const canvasDom = document.querySelector(".three_box");
  const canvasWidth = canvasDom.offsetWidth;
  const canvasHeight = canvasDom.offsetHeight;
  const camera = new THREE.PerspectiveCamera(
    40,
    canvasWidth / canvasHeight,
    0.1,
    3000
  );
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //去除锯齿化
  });
  let xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  renderer.setPixelRatio(window.devicePixelRatio); //优化的代码
  //   光源
  const amLight = new THREE.AmbientLight(0xffffff, 0.8);
  scene.add(amLight);
  const pointlight = new THREE.PointLight(0xffffff, 1.0);
  pointlight.position.set(200, 200, 200);
  scene.add(pointlight);
  //   形状
  const capsuleGeo = new THREE.CapsuleGeometry(10, 25, 10, 10);
  const material = new THREE.MeshPhongMaterial({
    color: 0x00ffa0,
    shininess: 15,
    specular: 0xff0000,
  });
  const capsuleMesh = new THREE.Mesh(capsuleGeo, material);
  capsuleMesh.position.set(0,0,0)
  scene.add(capsuleMesh);
  const capsuleEdges = new THREE.EdgesGeometry(capsuleGeo);
  const capsuleLine = new THREE.LineSegments(
    capsuleEdges,
    new THREE.LineBasicMaterial({ color: 0x444444 })
  );
  capsuleLine.position.set(0, 0, 0);
  scene.add(capsuleLine);

  // 相机定位
  camera.position.set(200, 200, 200);
  camera.lookAt(0, 0, 0);
  // 渲染器配置
  renderer.setSize(canvasWidth, canvasHeight);
  renderer.render(scene, camera);
  canvasDom.appendChild(renderer.domElement);
  let controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", function () {
    renderer.render(scene, camera);
  });
  function rorate() {
    capsuleGeo.rotateX(0.005);
    capsuleLine.rotateX(0.005);
    renderer.render(scene, camera);
    requestAnimationFrame(rorate);
  }
  rorate();
  // ******************* gui   ******************
  const gui = new GUI();
  // 将 gui加入到对应的DOM 结构中
  gui.domElement.style.position = "absolute";
  canvasDom.appendChild(gui.domElement);
  // // 创建一个对象属性
  // const obj = {
  //   x: 0,
  //   y: 0,
  //   z: 0,
  // };
  // // 创建一个交互界面
  // gui.add(obj, "x", 0, 100);
  // gui.add(obj, "y", 0, 100);
  // gui.add(obj, "z", 0, 100);
  gui.add(amLight,"intensity",0,10)
  gui.add(capsuleMesh.position,"x",0,100)
  gui.add(capsuleMesh.position,"y",0,100)
  gui.add(capsuleMesh.position,"z",0,100)
  
});
</script>


<style  scoped>
.three_box {
  position: relative;
  width: 80vw;
  height: 70vh;
}
</style>